<template>
  <div class="home">
    <div class="header">
      <div class="address_map">
        <img src="~assets/img/定位.png" alt="">
        <span v-if="address">{{ address }}</span>
        <span v-if="!address">正在定位</span>
        <img class="desc" src="~assets/img/下箭头.png" alt="">
        <div class="rfloat">
          <img src="~assets/img/购物车.png" alt="">
          <img src="~assets/img/消息.png" alt="">
        </div>
      </div>
    </div>
    <div class="content">
      <div class="shop_search">
        <i class="fa fa-qrcode" aria-hidden="true"></i>
        <input type="text" />
        <button>搜索</button>
      </div>

      <div class="food-list">
        <div class="food-item" v-for="(item, index) in this.restaurantsList" @click="gotoDetailsPage(item.id)">
          <img src="~assets/img/蜜雪.jpg" alt="" />
          <div class="item-info">
            <div class="name">{{ item.name }}</div>
            <div>
              <span class="score">{{ item.rating }}分</span>
              <span class="sales">月售{{ item.recent_order_num }}</span>
              <span class="time"
                >{{ item.float_minimum_order_amount }}分钟</span
              >
              <span class="distance">{{ item.float_delivery_fee }}km</span>
            </div>
            <div>
              <span class="send">起送￥15</span>
              <span class="distribution">{{
                item.piecewise_agent_fee.tips
              }}</span>
            </div>
            <div class="remind">
              <span v-for="iiitem in item.supports">{{ iiitem.name }}</span>
            </div>
            <div class="preferential">
              <span v-for="iitem in item.activities">{{ iitem.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <final-tab-bar></final-tab-bar>
  </div>
</template>

<script>
import FinalTabBar from "components/tabbar/FinalTabBar";

export default {
  name: "home",
  data() {
    return {
      // 经纬度
      latitude: "34.15577",
      longitude: "108.90582",
      // 餐馆列表
      restaurantsList: [],
      
    };
  },
  components: {
    FinalTabBar,
  },
  computed: {
    address() {
      return this.$store.getters.address;
    },
  },
  created() {
    this.getLocation();
    this.getRestaurantsList();
  },
  mounted() {},
  methods: {
    getLocation() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);
        function onComplete(data) {
          self.$store.dispatch("setLocation", data);
          self.$store.dispatch("setAddress", data.formattedAddress);
          // self.getRestaurantsList(self);
          // self.latitude = data.location.position.Q
          // self.longitude = data.location.position.R
        }

        function onError(data) {
          // 定位出错
          // self.getLngLatLocation();
        }
      });
    },
    getRestaurantsList() {
      this.$axios({
        url: "/shopping/restaurants",
        params: {
          latitude: this.latitude,
          longitude: this.longitude,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.restaurantsList = res.data;
        })
        .catch((err) => err);
    },
    gotoDetailsPage(id){
      this.$router.push({ path:'/restaurant',query:{restaurantId:id}})
    }
  },
};
</script>

<style scoped>
@import "~assets/css/global.css";
.home {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.home .header {
  width: 100%;
  height: 65px;
  background-color: #009be2;
}
.home .header .address_map {
  padding: 20px 5px 20px 15px;
  color: white;
  font-size: 14px;
}
.address_map img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  font-size: 18px;
  position: relative;
}
.address_map .desc {
    width: 15px;
  height: 15px;
  position: absolute;
  top: 25px;
  left: 224px;
}
.address_map span {
  display: inline-block;
  width: 65%;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.address_map .rfloat {
  float: right;
}
.address_map .rfloat img {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.content {
  width: 100%;
  background-color: #f6f6f6;
  padding-top: 10px;
  position: absolute;
  top: 50px;
  border-radius: 15px;
}
.content .shop_search {
  width: 80%;
  /* margin: 0 auto; */
  margin-left: 5%;
  position: relative;
}
.content .shop_search input {
  width: 100%;
  height: 24px;
  border-radius: 12px;
  outline: 0;
  border: 1px solid #009be2;
  background-color: #f6f6f6;
  padding-left: 30px;
}
.content .shop_search i,
.content .shop_search button {
  position: absolute;
}
.content .shop_search i {
  top: 7px;
  color: #009be2;
  left: 10px;
  font-size: 18px;
}
.content .shop_search button {
  width: 55px;
  height: 27px;
  border-radius: 12px;
  outline: 0;
  border: none;
  background-image: linear-gradient(to right, #0bb1fd, #1296db);
  color: white;
  font-size: 13px;
  top: 0;
  right: -34px;
}

.food-list {
  margin-top: 20px;
  margin-bottom: 69px;
}
.food-list .food-item {
  width: 90%;
  background-color: white;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
  height: 110px;
}
.food-item img {
  display: inline-block;
  width: 30%;
  height: 90px;
  margin: 10px;
  border-radius: 10px;
  background-color: yellowgreen;
  vertical-align: middle;
}
.food-item .item-info {
  display: inline-block;
  vertical-align: middle;
  width: 141px;
  height: 90px;
}
.food-item .item-info div {
  margin-bottom: 3px;
}
.food-item .item-info .name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: bolder;
  width: 99%;
}
.food-item .item-info div:nth-child(2) {
  font-size: 12px;
  color: #777777;
  font-size: 12px;
}
.food-item .item-info .score {
  color: #f8570c;
  font-size: 13px;
  margin-right: 5px;
}

.food-item .item-info .time,
.food-item .item-info .distance {
  float: right;
}
.food-item .item-info div:nth-child(3) {
  color: #777777;
  font-size: 12px;
}
.food-item .item-info .preferential,
.food-item .item-info .remind {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  
}

.food-item .item-info .remind span {
  background-color: rgba(243, 123, 53, 0.5);
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  padding: 0 3px;
  border-radius: 5px;
  width: fit-content;
  color: #f8570c;
  margin-right: 2px;
  transform: scale(0.8);
}

.food-item .item-info .preferential span {
  font-size: 12px;
  color: #f8570c;
  display: inline-block;
  width: fit-content;
  padding: 0 2px;
  border: 1px solid #f8570c;
  margin-right: 2px;
  border-radius: 3px;
}
</style>